@extends('layout.default')

@section('layout.content')
  <div class="space-18"></div>
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" id="user-create" autocomplete="off">
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="name"> <b><span class="red align-middle">*</span> 姓名：</b>
          </label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="name" name="name" placeholder="志愿者姓名" value=""/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="idcard"> <b><span class="red align-middle">*</span> 性别：</b>
          </label>
          <div class="col-sm-6">
            <div class="radio">
              <label class="inline no-padding-left">
                <input name="gender" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg">
                <span class="lbl"> 男</span>
              </label>
              <label class="inline">
                <input name="gender" type="checkbox" value="2" class="ace ace-checkbox-2 input-lg">
                <span class="lbl"> 女</span>
              </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="birthday"> <b><span class="red align-middle">*</span> 生日：</b>
          </label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="birthday" name="birthday" placeholder="8位数字格式，例如20061026"
                   maxlength="8" value=""/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="idcard"> <b><span class="red align-middle">*</span> 证件号码：</b>
          </label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="idcard" name="idcard" placeholder="志愿者身份证号码" maxlength="18"/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="idcard"> <b><span class="red align-middle">*</span> 手机号码：</b>
          </label>
          <div class="col-sm-5">
            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="手机号码" maxlength="11"
                   value=""/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="branch"> <b>所属分支：</b> </label>
          <div class="col-sm-6">
            <input type="hidden" id="branch" value="{{Auth('admin')->user()->branch->id}}">
            <p class="form-control-static">{{Auth('admin')->user()->branch->fullname}}（{{Auth('admin')->user()->branch->name}}）</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="school"> 单位机构： </label>
          <label class="col-sm-6">
            <input type="text" id="school" name="school" class="form-control" placeholder="默认分组" data-id="1">
          </label>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="memo"> 备注： </label>
          <div class="col-sm-6">
            <textarea class="form-control" id="memo" name="memo" placeholder="备注信息" rows="6"></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-6">
            <p>标注星号(<b><span class="red">*</span></b>)为必填项。</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-4">
            <button type="submit" class="btn btn-primary">
              <i class="ace-icon fa fa-check"></i>
              <span class="">确定</span>
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>


  <script type="text/javascript">
      $(function () {

          var school = $('#school').attr('data-id');

          $("input:checkbox[name='gender']").on('click', function (e) {
              $("input:checkbox[name='gender']").not(this).attr("checked", false);
          });

          $('#school').autocomplete({
              source: function (request, response) {
                  $.get('{{route('util.schools')}}', {
                      'term': request.term,
                  }, function (data) {
                      response($.map(data, function (item) {
                          return {label: item.name, value: item.name, id: item.id}
                      }));

                  }, 'json');
              },

              select: function (e, ui) {
                  school = ui.item.id;
              },
              minLength: 2,
          });

          /*$("#school").bind("autocompleteselect",function(e, ui) {
              alert(ui.item.id);
          });*/

          /**
           表单前端验证
           */
          $("#user-create").validate({
              rules: {
                  name: {required: true, isChinese: true},
                  idcard: {required: true, isIdCardNo: true},
                  mobile: {required: true, isMobile: true},
                  gender: {required: true},
                  birthday: {
                      required: true,
                      digits: true,
                      maxlength: 8,
                      minlength: 8,
                  },
              },
              messages: {
                  name: {required: "请填写姓名"},
                  idcard: {required: "请填写身份证号码", isIdCardNo: "身份证号码不正确"},
                  mobile: {required: "请填写手机号码"},
                  gender: {required: "请选择性别"},
                  birthday: {
                      required: "请填写生日",
                      maxlength: "生日格式为8位数字",
                      minlength: "生日格式为8位数字",
                      digits: "生日格式为8位数字"
                  }
              },


              /* 失去焦点时不验证 */
              onfocusout: false,
              onkeyup: false,
              errorElement: 'div',
              errorClass: 'help-block',

              success: function (e) {
                  $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                  $(e).remove();
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: [3,'#dd0000'], time: 2000});
                      return false;
                  });

              },

              submitHandler: function (form) {
                  $.post('{{route('volunteer.store')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'name': $("input[name='name']").val(),
                      'mobile': $("input[name='mobile']").val(),
                      'idcard': $("input[name='idcard']").val(),
                      'gender': $("input[name='gender']:checked").val(),
                      'birthday': $("input[name='birthday']").val(),
                      'school': school,
                      'type': 2,
                      'memo': $('#memo').val(),
                      'source': 1,
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {time: 1000,shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }


          });

      });
  </script>
@stop